<template>
<div 
    class="scroll_container"
    ref="ScrollElCp"
    :style="{
        height:height,
        width:width,
    }">
    <slot></slot>
</div>
</template>
<script>
//滚动容器组件（解决页面切换时不记录组件滚东条的情况）
export default {
    name: 'ScrollElCp',
    props:{
        height:String,  //高度
        width:String,  //宽度
    },
    data() {
        return {
            scrollTop:0,
        }
    },
    watch:{
        $route(){
            const ScrollElCp = this.$refs.ScrollElCp;
            if(!ScrollElCp) return;
            ScrollElCp.scrollTop = this.scrollTop;
        },
    },
    mounted(){
        const ScrollElCp = this.$refs.ScrollElCp;
        ScrollElCp.addEventListener('scroll',()=>{
            this.scrollTop = ScrollElCp.scrollTop;
        });
    },
}
</script>
<style scoped lang="scss">
.scroll_container {
    overflow: scroll;
    -webkit-overflow-scrolling: touch;
}
</style>
